// 从本地获取信息并渲染
const userId = localStorage.getItem('user-id')
const token = localStorage.getItem('user-token')

//如果能获取到用户id，则渲染首页面中购物车商品的数量
if(userId && token) {
  axios({
    url:'/cart/list',
    headers:{
      'Access-Token':token,
      platform:'H5'
    }
  }).then(result=>{
    console.log(result)
    // console.log(result.data.data.cartTotal)
    if(result.data.data.cartTotal===0) {
      document.querySelector('.car_number').style.display = 'none'
    } else {
      document.querySelector('.car_number').innerHTML= result.data.data.cartTotal
      document.querySelector('.car_number').style.display = 'block'
    }
  })
} else {
  document.querySelector('.car_number').style.display = 'none'
}




// 请求并渲染内容
axios({
  url:'/page/detail',
  params:{
    pageId:'0'
  }
}).then(result=>{
  // console.log(result)
  // console.log( result.data.data.pageData.items)

  // 搜索框
  const search = result.data.data.pageData.items[0].params.placeholder
  // console.log(search)
  document.querySelector('.search_content').innerHTML=`
    <span class="iconfont icon-RectangleCopy"></span>
    <input type="search" placeholder="${search}">
  `

  // 轮播图
  const banner = result.data.data.pageData.items[1].data
  // console.log(banner)
  document.querySelector('.swiper-wrapper').innerHTML= banner.map(item=>{
      return `<div class="swiper-slide"><img src="${item.imgUrl}" alt="" data-id="${item.link.form[0].value}"></div>`
  }).join('')

  var swiper = new Swiper(".mySwiper", {
    loop: true,
    autoplay: {
      delay: 1000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
    },
    pagination: {
      el: ".swiper-pagination",
    },
  })


  // 店铺公告
  const notice = result.data.data.pageData.items[2].params.text
  // console.log(notice)
  document.querySelector('.prompt .prompt_scroll').innerHTML=`<p>${notice}</p>`


  // 导航组渲染
  const navBar = result.data.data.pageData.items[3].data
  // console.log(navBar)
  document.querySelector('.nav').innerHTML = navBar.map(({imgName, imgUrl, link, text})=>{
    return `
      <li>
        <a href="./class.html">
          <span>
            <img src="${imgUrl}" alt="">
          </span>
          <p>${text}</p>
        </a>
      </li>
    `
  }).join('')


  // 图片渲染
  const image = result.data.data.pageData.items[4]
  // console.log(image)
  document.querySelector('.recommend').innerHTML=`
    <a href="./class.html">
      <img src="${image.data[0].imgUrl}" alt="">
    </a>
  `

  // 副文本渲染
  const richText = result.data.data.pageData.items[5].params.content
  // console.log(richText)
  document.querySelector('.like').innerHTML=`${richText}`


  // 商品内容渲染
  const goods= result.data.data.pageData.items[6].data
  // console.log(goods)
  document.querySelector('.main_content').innerHTML = goods.map(item=>{
  const  {goods_id,goods_image,goods_name,goods_price_max,goods_sales,line_price_max} = item
    return`
    <li>
      <a href="javascript:;">
        <div class="pic">
          <img src="${goods_image}" alt="" data-id="${goods_id}">
        </div>
        <div class="info" data-id="${goods_id}">
          <div class="txt ellipsis-2" data-id="${goods_id}">${goods_name}</div>
          <div class="count" data-id="${goods_id}">已售${goods_sales}件</div>
          <div class="price" data-id="${goods_id}">
            <span>￥<i data-id="${goods_id}">${goods_price_max}</i></span>
            <span>${line_price_max==='0.00'?'':`￥<i data-id="${goods_id}">${line_price_max}</i>`}</span>
          </div>
        </div>
      </a>
    </li>
    `
  }).join('')
})

// 点击轮播图获取商品id存入本地
document.querySelector('.swiper-wrapper').addEventListener('click',e =>{
  // console.log(e.target.dataset.id)
  localStorage.setItem('goodsInformation',e.target.dataset.id)
  location.href = './information.html'
})
// console.log(result.data.data.pageData.items[1].data[0].link.form[0].value)


// 点击商品获取商品id存入本地
document.querySelector('.main_content').addEventListener('click',e =>{
  // console.log(e.target.dataset.id)
  localStorage.setItem('goodsInformation',e.target.dataset.id)
  location.href = './information.html'
})




